<template>
  <div style="width:100%;height:100%">
    <!-- 日期选择器 -->
    <div>
      <el-date-picker
        v-model="begin"
        type="date"
        placeholder="请选择开始日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
      -
      <el-date-picker
        v-model="end"
        type="date"
        placeholder="请选择截止日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
      <el-button style="primary" @click="handleQueryStatistics">查询</el-button>
    </div>
    <!-- 整合echarts图表展示 -->
    <div ref="myDiv" style="width:100%;height:100%"></div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import { ListOrderStatistics } from '@/api/order'
let myDiv = ref()
let begin = ref('')
let end = ref('')
const handleQueryStatistics = async () => {
  //提交查询区间数据的请求
  const { data } = await ListOrderStatistics(begin.value, end.value)

  //页面初始化时渲染echarts到div中展示
  var chartDom = myDiv.value //获取页面中的div dom元素
  var myChart = echarts.init(chartDom)
  var option

  option = {
    title: {
      text: '订单总金额统计数据',
      textStyle: {
        color: '#235894',
      },
    },
    xAxis: {
      type: 'category',
      data: data.xData,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: data.yData,
        type: 'bar',
        showBackground: true,
        smooth: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
      },
    ],
  }

  option && myChart.setOption(option)
}
onMounted(() => {})
</script>
